<template>
  <div class="five-menu">
    <div class="five-menu-text">
      <i class="iconfont iconfloodLighting-o"></i>
      <span class="five-menu-text-title">辅助监测系统监控</span>
    </div>
    <div class="five-menu-main borderStyle">
      <div class="five-menu-main-select centerbox">
        <span>变电站：</span>
        <el-select v-model="stationName2" @change="stationChange" filterable placeholder="请选择">
          <el-option
            v-for="item in stationName_options"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </div>
      <div class="five-menu-main-menu">
        <div
          v-for="(item,index) in oldMenuLists"
          :key="index"
          :class="{menuActive:item.active}"
          @click="changeLeftMenu(item,index)"
          class="centerbox"
        >
          <div class="centerbox img">
            <!-- <img v-if="item.active" :src="item.iconActive" :alt="item.name" class="iconImage" /> -->
            <!-- <img v-else :src="item.iconImage" :alt="item.name" class="iconImage" /> -->
            <i :class="item.iconfont" class="iconfont icons"></i>
          </div>
          <div class="name">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { menuListType, optionType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { publicAPIModule } from "@/store/modules/public";
import { GetSocketModule } from "@/store/modules/GetSocketData";
//loadsh
import lodash from "lodash";
import { log } from "three";
import filter from "@/utils/filter";
@Component
export default class extends Vue {
  public stationName2: any = "";
  public stationId2: string = "";
  // 左侧菜单data
  public menulist = [
    // {
    //   name: "消防监控",
    //   iconfont: "iconxiaofang",
    //   active: true,
    //   path: "firefight",
    //   iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/firefight.png"),
    //   iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/firefight_active.png"),
    //   sys: "AUX",
    //   objId: "",
    // },
    // {
    //   name: "照明控制",
    //   iconfont: "iconfloodLighting-o",
    //   active: false,
    //   path: "light",
    //   iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/light.png"),
    //   iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/light_active.png"),
    //   sys: "AUX",
    //   objId: "",
    // },
    // {
    //   name: "安全监控",
    //   iconfont: "iconanfang",
    //   active: false,
    //   path: "security",
    //   iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/security.png"),
    //   iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/security_active.png"),
    //   sys: "AUX",
    //   objId: "",
    // },
    // {
    //   name: "环境监控",
    //   iconfont: "iconhuabanbeifen",
    //   active: false,
    //   path: "ecocrisis",
    //   iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/ecocrisis.png"),
    //   iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/ecocrisis_active.png"),
    //   sys: "AUX",
    //   objId: "",
    // },
    // {
    //   name: "给排水系统",
    //   iconfont: "icongeipaishui",
    //   active: false,
    //   path: "drainage",
    //   iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/drainage.png"),
    //   iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/drainage_active.png"),
    //   sys: "AUX",
    //   objId: "",
    // },
  ];
  oldMenuLists = [];
  public QxhjoldMenuList: any = [
    {
      name: "微气象",
      SBID: "0402",
      active: true,
    },
    {
      name: "温湿度传感器",
      SBID: "0401",
      active: false,
    },
    {
      name: "SF6气体浓度传感器",
      SBID: "0406",
      active: false,
    },
    {
      name: "风机",
      SBID: "0403",
      active: false,
    },
    {
      name: "空调",
      SBID: "0407",
      active: false,
    },
    {
      name: "SF6主机",
      SBID: "0409",
      active: false,
    },
    {
      name: "水浸传感器",
      SBID: "0408",
      active: false,
    },
    {
      name: "电缆测温",
      SBID: "0410",
      active: false,
    },
    {
      name: "照明控制",
      SBID: "0411",
      active: false,
    },
  ];
  public HzbjoldMenuList: any = [
    {
      name: "火灾报警主机",
      SBID: "0101",
      active: true,
    },
    {
      name: "声光报警器",
      SBID: "0110",
      active: false,
    },
    {
      name: "手动报警器",
      SBID: "0102",
      active: false,
    },
    {
      name: "烟感探测器",
      SBID: "0109",
      active: false,
    },
    {
      name: "感温线缆",
      SBID: "0114",
      active: false,
    },
    {
      name: "烟雾对射",
      SBID: "0113",
      active: false,
    },
  ];
  public AqwsoldMenuList: any = [
    {
      name: "门禁管理",
      SBID: "0201",
      active: true,
    },
    {
      name: "电子围栏",
      SBID: "0202",
      active: false,
    },
    {
      name: "红外对射",
      SBID: "0203",
      active: false,
    },
    {
      name: "红外双鉴",
      SBID: "0204",
      active: false,
    },
  ];
  // 有数据
  get stationName_options() {
    return publicAPIModule.queryHasDataStationsList;
  }
  // 监听下拉框数组
  // @Watch("stationName_options")
  // public bbbb(data) {
  //   this.nameAndOption();
  // }
  // 监听下拉框的值
  @Watch("stationName2")
  public aaaa(val) {
    this.nameAndOption();
  }
  // 监听下拉框
  @Watch("stationName_options")
  public stationoptions(val) {
    this.nameAndOption();
  }
  // 变电站值和变电站下拉框都有值 给store里赋值
  nameAndOption() {
    let name = this.stationName2;
    let option = this.stationName_options;
    console.log(name);
    console.log(option);

    if (name && option.length > 0) {
      let item = option.filter((o) => o.code === name)[0];
      if (item) {
        // console.log(item);
        AuxiliaryMonitorModule.setStationName(item);
      }
    }
    // this.getLeftmenu(name);
  }

  // 监听路由
  @Watch("$route", { immediate: true, deep: true })
  public routechange(to: any, from: any) {
    console.log("跳转路由", to.name);
    if (to.name == "firefight") {
      this.oldMenuLists = this.HzbjoldMenuList; // 火灾报警
    } else if (to.name == "entranceAdmin" || to.name == "security") {
      this.oldMenuLists = this.AqwsoldMenuList; // 安全警卫
    } else if (to.name == "ecocrisis") {
      this.oldMenuLists = this.QxhjoldMenuList; // 气象管理
    }

    var selectrouter = to.path.split("/")[2];
    this.stationName2 = to.query.code;
    // console.log("this.menulist", this.oldMenuLists);
    // console.log(selectrouter, this.stationName2);

    if (this.oldMenuLists.length > 0 && to.query.type) {
      this.oldMenuLists.map((v: any, i: any) => {
        v.active = true;
        v.name == to.query.type ? (v.active = true) : (v.active = false);
      });
    }
  }

  //变电站下拉框改变
  stationChange(val) {
    let resultArr = this.stationName_options.filter((item) => {
      return item.code === val;
    });
    let path = this.$route.path;
    console.log(path);

    if (resultArr.length > 0) {
      this.$router.push({
        path: path,
        query: {
          code: resultArr[0].code,
          name: resultArr[0].name,
          type: this.router.name,
          SBID: this.router.SBID,
          active: this.router.active,
        },
      });
    }
  }
  router: any = {};
  // 左侧菜单切换
  changeLeftMenu(item: any, index?: any) {
    // console.log("左侧菜单切换111111:", item, index,this.menulist);
    this.router = item;
    this.oldMenuLists.map((v: any, i: any) => {
      v.active = false;
      if (v.name === item.name) {
        v.active = true;
        // console.log("左侧当前项", v);
      }
    });
    item.active = true;
    var items = this.$route.query;
    // var storage = window.localStorage;
    //       var d = JSON.stringify(item);
    //       storage.setItem("changeLeftMenu", d);
    let query = {
      stationId: this.stationName2,
      code: items.code,
      name: items.name,
      type: item.name,
      SBID: item.SBID,
      active: item.active,
    };
    console.log("跳转路由", item);
    if (item.name == "门禁管理") {
      this.$router.push({
        path: "/auxiliarymonitor/entranceAdmin",
        query: query,
      });
    } else if (
      item.name == "电子围栏" ||
      item.name == "红外对射" ||
      item.name == "红外双鉴"
    ) {
      this.$router.push({
        path: "/auxiliarymonitor/security",
        query: query,
      });
      //   }
    } else {
      this.$router.push({ path: "", query: query });
    }
  }
  // 左侧菜单
  private leftData = [];
  newMenulist = [];
  newMenulists() {
    let leftData = JSON.parse(JSON.stringify(this.leftData));
    leftData.pop();
    let arr = [];

    if (leftData && leftData.length > 0) {
      leftData.map((v: any, i: any) => {
        if (v.name == "消防监控") {
          let obj = {
            name: v.name,
            iconfont: "iconxiaofang",
            active: false,
            path: "firefight",
            iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/firefight.png"),
            iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/firefight_active.png"),
            sys: v.sys,
            objId: v.objId,
          };
          arr.push(obj);
        }
        //  else if (v.name == "照明控制") {
        //   let obj = {
        //     name: v.name,
        //     iconfont: "iconfloodLighting-o",
        //     active: false,
        //     path: "light",
        //     iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/light.png"),
        //     iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/light_active.png"),
        //     sys: v.sys,
        //     objId: v.objId,
        //   };
        //   arr.push(obj);
        // }
        else if (v.name == "安防监控") {
          let obj = {
            name: v.name,
            iconfont: "iconanfang",
            active: false,
            path: "security",
            iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/security.png"),
            iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/security_active.png"),
            sys: v.sys,
            objId: v.objId,
          };
          arr.push(obj);
        } else if (v.name == "环境监测") {
          let obj = {
            name: v.name,
            iconfont: "iconicon-wenshidu",
            active: false,
            path: "ecocrisis",
            iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/ecocrisis.png"),
            iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/ecocrisis_active.png"),
            sys: v.sys,
            objId: v.objId,
          };
          arr.push(obj);
        } else {
          // 给排水系统
          let obj = {
            name: v.name,
            iconfont: "icongeipaishui",
            active: false,
            path: "drainage",
            iconImage: require("../../../../assets/img/AuxiliaryMonitor/icon/drainage.png"),
            iconActive: require("../../../../assets/img/AuxiliaryMonitor/icon/drainage_active.png"),
            sys: v.sys,
            objId: v.objId,
          };
          arr.push(obj);
        }
      });
    }
    arr.map((v) => {
      if (v.path == this.$route.name) {
        v.active = true;
      }
    });
    this.menulist = arr;
    // console.log(arr);

    var mode = arr.filter((v) => {
      return v.path == this.$route.name;
    });
    // console.log(mode);

    if (mode.length <= 0) {
      this.changeLeftMenu(arr[0], 0);
    }
    // return arr;
    this.newMenulist = arr;
  }
  // 获取左侧菜单
  private getLeftmenu(stationId) {
    let form = {
      // stationId: "100435539",
      stationId: stationId,
      type: "辅控系统",
    };
    (this as any).$services
      .getAuxiliaryMenu({ data: form, method: "get" })
      .then((result: any) => {
        let data = result.data;
        this.leftData = data;
        this.newMenulists();
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  get SubstationList2() {
    return publicAPIModule.queryHasDataStationsList;
  }
  public Substationbdz = [];
  @Watch("SubstationList2", { deep: true })
  private setbdzCode(newData) {
    // console.log(this.$route.query);
    if (newData && newData.length > 0) {
      // this.stationName2=this.$route.query
    }
    // console.log(newData);
  }
  mounted() {
    if (this.$route.query.name) {
      var item = this.$route.query;
      (this as any).stationName2 = item.code;
    }
    console.log(this.oldMenuLists);

    this.changeLeftMenu(this.oldMenuLists[0]);
  }
}
</script>

<style lang="scss" scoped>
.five-menu {
  width: 3.03rem;
  height: 100%;
  &-text {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    &-title {
      font-size: 0.2rem;
      .iconfont {
        font-size: 0.3rem;
      }
    }
  }
  &-main {
    width: 100%;
    height: calc(100% - 0.4rem);
    &-select {
      height: 0.8rem;
    }
    &-menu {
      > div {
        height: 0.64rem;
        line-height: 0.64rem;
        border-top: 1px solid rgba(95, 115, 171, 1);
        box-sizing: border-box;
        cursor: pointer;
        .img {
          width: 0.55rem;
          height: 0.64rem;
          // .iconImage {
          //   display: inline-block;
          //   margin: 0 0.1rem;
          //   box-sizing: border-box;
          // }
          .icons {
            color: #aaa;
            font-size: 0.18rem;
          }
        }
        .name {
          width: calc(100% - 0.55rem);
        }
      }
      > div:hover {
        background: linear-gradient(
          90deg,
          rgba(20, 123, 252, 0.65) 0%,
          rgba(20, 123, 252, 0) 100%
        );
        background-size: 100% 100%;
        .icons {
          color: #fff;
        }
      }
      .menuActive {
        background: linear-gradient(
          90deg,
          rgba(20, 123, 252, 0.65) 0%,
          rgba(20, 123, 252, 0) 100%
        );
        background-size: 100% 100%;
        > div {
          .icons {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

